<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Insert title here</title>
<link rel="stylesheet" href="../static/bootstrap-4.1.1/bootstrap.min.css">
<style type="text/css">
	html,body{
		margin:0;
		padding:0;
		height:100%;
		width:100%;
	}
	
	.my-container{
		position:relative;
		width:100%;
		min-width:900px;
		height:100%;
		min-height: 600px;
	}
	
	.my-title{
		position: absolute;
		left:0;
		top:0;
		height:50px;
		width:100%;
		background-color: #112233;
		color:#CCCCCC;
		font-size:26px;
		font-weight:bold;
		font-family: 楷体;
		line-height:50px;
		padding-left:5px;
		z-index: 10;	
	}
	
	.my-nav{
		position: absolute;
		left:0;
		top:50px;
		bottom:30px;
		width:150px;
		background-color: #112235;
	}
	
	.my-content{
		position: absolute;
		left:150px;
		right:0;
		top:50px;
		bottom:30px;
		background-color: #EEEEEE;
	}
	
	.my-remark{
		position: absolute;
		left:0;
		bottom:0;
		height:30px;
		width:100%;
		background-color: #112233;
	}
	
	.my-content iframe{
		width:100%;
		height:100%;
		border:none;
	}

	.my-curr-user{
		position: absolute;
		right:20px;
		bottom:5px;
		color:#CCCCCC;
		font-size:14px;
		line-height:20px;
	}
	
	.my-menu-unit{
		border-bottom:1px solid #112244;
	}
	
	.my-main-item{	
		color:#CCCCCC;		
		font-size:13px;		
		padding:8px 0 8px 20px;		
		cursor: pointer;	
	}
	
	.my-main-item:hover{
		color:white;
		font-weight:bold;
	}
	
	.my-sub-container{
		display: flex;
		flex-direction: column;
	}
	
	.my-sub-item{
		font-size:13px;
		/* display: block;	 */
		padding:4px 0px 4px 20px;
		margin:0 0px 0 20px;
		/* width:fit-content; */
		width:116px;
		color:#AAAAAA;	
		text-decoration: none;	
		border-radius:10px;
	}
	
	.my-sub-item:hover{
		text-decoration: none;	
		color:white;
		font-weight:bold;
		background-color: #33DDCC;
		text-align:center;
		padding:4px 0px 4px 0px;
		box-shadow: 0 0 20px 1px #33DDCC;
	}

</style>

</head>
<body>
<div id="app" class="my-container">

<div class="my-title">
	生产过程云信息系统
	<div class="my-curr-user dropdown">
		<div class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;"  >当前用户：${CurrUser.userId }</div>
		<div class="dropdown-menu dropdown-menu-right" style="min-width:100px;" >
		    <a class="dropdown-item" href="#">修改密码</a>
		    <a class="dropdown-item" href="#">退出系统</a>
		</div>
	</div>
	
</div>
<div class="my-nav">

	<div class="accordion" id="my-menu"><!-- 菜单容器 -->

	
			<div v-for="mainMenu in menus" class="my-menu-unit"><!-- 菜单单元 -->
				
				<div class="my-main-item" data-toggle="collapse" :data-target="'#my-menu-'+mainMenu.menuId">
					{{mainMenu.menuName }}
				</div>
				 
				<div :id="'my-menu-'+mainMenu.menuId" class="collapse my-sub-container"  data-parent="#my-menu">
					
					
						<a v-for="subMenu in mainMenu.subMenuList" class="my-sub-item" :href="'..'+subMenu.menuUrl" target="contentFrame" >{{subMenu.menuName }}</a>
					
					
				</div>
				
			</div>
		
	</div>

</div>
<div class="my-content"><iframe name="contentFrame"></iframe></div>
<div class="my-remark" ></div>

</div>

<script type="text/javascript" src="../static/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../static/js/popper-1.14.3.min.js"></script>
<script type="text/javascript" src="../static/bootstrap-4.1.1/bootstrap.min.js"></script>
<script type="text/javascript" src="../static/js/vue-2.5.16.min.js" ></script>
<script type="text/javascript" src="../static/js/axios.min.js" ></script>

<script type="text/javascript">

new Vue({
	
	el:'#app',
	
	data:{
		
		menus:[],
		
	},
	
	//Vue声明周期回调函数mounted，表示界面元素挂载之后执行的函数
	mounted(){
		/* 
		let vm = this;//此时this即Vue对象
		
		axios
		.get('home/menus')
		.then(function (response) {
			//这里的this已经不是Vue对象了
		    vm.menus=response.data;
		    
		})
		.catch(function (error) {
		    console.log(error);
		});
		 */
		 
		axios
		.get('home/menus')
		.then((response) => {
			//这里的this还是Vue对象了
		    this.menus=response.data;
		    
		})
		.catch(function (error) {
		    console.log(error);
		}); 
		 
	}
	
});

</script>

</body>

</html>